<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>

    <head>
        <style>
        body {
            font-size: 50px;
            margin: 0 auto;
            padding: 70px 0;
            dispaly: grid;
        }
        form {
            text-align: center;
            max-width: 800px;
            margin: 0 auto;
            padding: 70px 0;
            background-repeat: no-repeat;
            background-position: center;
            border-radius: 5px;
        }
        .skewed {
            position: absolute;
            top: -35%;
            bottom: 0;
            right: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: hsl(163, 47%, 54%);
            z-index: -1;
            transform: skewY(-5deg);
            transform-origin: top left;
        }
        .btn {
            background-color: #4CAF50; /* Green */
            border: none;
            color: white;
            padding: 16px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            -webkit-transition-duration: 0.4s; /* Safari */
            transition-duration: 0.4s;
            cursor: pointer;
            background-color: rgb(198, 255, 255); 
            color: black; 
            border: 2px solid #008997;
        }
        .btn:hover {
            background-color: #008997;
            color: white;
        }
        .btn:active {
  			    background-color: #0367a6;
  			    box-shadow: 0 5px #666;
  			    transform: translateY(4px);
        }
        .btn span {
          cursor: pointer;
          display: inline-block;
          position: relative;
          transition: 0.5s;
        }

        .btn span:after {
          content: '»';
          position: absolute;
          opacity: 0;
          top: 0;
          right: -20px;
          transition: 0.5s;
        }

        .btn:hover span {
          padding-right: 25px;
        }

        .btn:hover span:after {
          opacity: 1;
          right: 0;
        }
        input[type=text] {
          width: 100%;
          padding: 12px 20px;
          margin: 8px 0;
          box-sizing: border-box;
          border: 3px solid #ccc;
          -webkit-transition: 0.5s;
          transition: 0.5s;
          outline: none;
        }
        input[type=text]:focus {
          border: 3px solid #555;
        }
        </style>
    </head>